<template>
  <div v-for="opt in options" :key="opt.value">
    <AtomRadio
      :label="opt.label"
      :value="opt.value"
      :name="name"
      :checked="value === opt.value"
      @update-radio-group="handleUpdate"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  options: { label: string; value: string }[]
  value: string
  name: string
}
const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  value: '',
  name: ''
})
const { options, value, name } = toRefs(props)

const handleUpdate = (params: { value: string; checked: boolean }) => {
  if (params.checked) {
    emit('update:value', params.value)
  }
}
</script>

<style scoped></style>
